<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>test scroll</title>
    <script src="./jquery-1.11.0.js"></script>
</head>
<body>
<style>
    html,body{
        height:100%;
        width: 100%;
    }
    html,body,ul,li{
        margin:0;
        padding:0;

    }
    div{
        box-sizing: border-box;
    }
    #container{
        height:300px;
        overflow: auto;
        border:1px solid green;
    }

    #outer{
        height:600px;
        width:80%;
        overflow: auto;
        border:1px solid green;
    }
    #inner{
        height:1000px;
        width:100%;
        border:1px solid blue;
    }
    #inner>ul{
        list-style-type: none;
    }
    #inner>ul>li a{
        text-decoration:none;
    }

    #inner>ul>li{
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        border:1px solid lightblue;
        font-size: 18px;
        font-weight: bold;
        line-height: 40px;

    }

    /*去掉input的高亮边*/
    html {
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }
    input:focus{
        outline-offset: 0;
        outline:0;
    }

    /**
    * 测试滚动时候会不会触发li中a元素的:active效果
    * chrome下不会触发:active
    * 只有点点击时候才会触发
    * ios的safria中会触发
    */

    li:active{
        background: -webkit-linear-gradient(top, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.1) 100%);
        background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.1) 100%);

    }
    li.tapped{
        background: -webkit-linear-gradient(top, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.1) 100%);
        background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.1) 100%);
    }
    a:active{
        color:red;
        background: black;
    }
</style>
       <div id="container">
           <div id="outer">
                <div id="inner">
                    <label for="testHighLight">我没有高亮边:</label><input name="testHighLight" type="text" value="testInput"/>
                    <a href="#" id="beginJsActive">js控制Active效果</a>
                    <ul>
                        <li><a href="#">baidubaidubaidubaidubaidubaidubaidubaidubaidubaidubaidubaidubaidu</a></li>
                        <li><a href="#">baidubaidubaidubaidubaidubaidubaidubaidubaidubaidubaidubaidubaidu</a></li>
                        <li><a href="#">baidubaidubaidubaidubaidubaidubaidubaidubaidubaidubaidubaidubaidu</a></li>
                        <li><a href="#">baidubaidubaidubaidubaidubaidubaidubaidubaidubaidubaidubaidubaidu</a></li>
                    </ul>
                    我是内容
                </div>
           </div>
       </div>
       <a href="#" id="testTapPassThrough">测试穿透问题</a>
<script>
       $(function(){
           /**
            *关于伪类：active的情况
            */
           var jsActiveBinded = false;
           $('#beginJsActive').on('touchstart',function(){
               if(jsActiveBinded === false){
                   $('body').append('on');
                   /**
                    * safria需要下面这句就行
                    */
                   /*document.addEventListener("touchstart", function() {},true);*/
                   /**
                    * andorid低版本的uc浏览器需要用js控制
                    */
                   $('li').on('touchstart', function(e){
                       $(this).addClass('tapped');
                   });
                   $('li').on('touchend', function(e){
                       $(this).removeClass('tapped');
                   });
                  jsActiveBinded = true;
               }else{
                   $('body').append('off');
                   $('li').off('touchstart');
                   $('li').off('touchend');
                   jsActiveBinded = true;
               }
           });

            $('#testTapPassThrough').on('touchstart',function(){
                 $('.overlay').show();

            });
           $('.overlay').on('click',function(){
             $(this).hide();
           });
           $('#testTapPassThroughParent').on('click',function(){
               $('.overlay').hide();
           })
       });


</script>
<style type="text/css">
    .overlay{
        opacity: 0.5;
        width: 100%;
        height: 100%;
        position: absolute;
        background: white;
    }
</style>
<div class="overlay">
    <span id="testTapPassThroughParent">点击我测试 是否会穿透到下面我没有高亮边:</span>
</div>
</body>
</html>